<template>
  <div class="about-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>关于 zjmOJ 判题平台</h1>
    </div>

    <!-- 平台介绍 -->
    <section class="intro-section">
      <div class="section-content">
        <h2>平台简介</h2>
        <p class="intro-text">
          zjmOJ
          是一个功能完善的在线编程判题平台，旨在为开发者提供高效、便捷的编程练习环境。
          无论是算法入门者还是资深开发者，都能在这里找到适合自己的编程题目，提升代码能力和问题解决能力。
        </p>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="features-section">
      <div class="section-content">
        <h2>核心功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">👤</div>
            <h3>用户管理</h3>
            <p>支持注册、登录、信息修改等完整用户生命周期管理</p>
          </div>
          <div class="feature-card">
            <p>题目系统</p>
            <p>包含题目发布、编辑、删除功能，支持多标签分类</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">💻</div>
            <h3>代码评测</h3>
            <p>实时判题反馈，支持多种编程语言，提供详细错误信息</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h3>数据统计</h3>
            <p>记录提交历史、通过率统计，生成个人学习报告</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 开发团队 -->
    <section class="team-section">
      <div class="section-content">
        <h2>开发团队</h2>
        <div class="team-members">
          <div class="member-card">
            <div class="member-name">开发组</div>
            <div class="member-role">全栈开发</div>
          </div>
          <div class="member-card">
            <div class="member-name">测试组</div>
            <div class="member-role">功能测试</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部操作区 -->
    <div class="action-buttons">
      <button class="start-btn" @click="goToHome">返回首页</button>
      <button class="start-btn" @click="goToProblems">开始刷题</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

// 返回首页
const goToHome = () => {
  router.push("/");
};

// 前往题库
const goToProblems = () => {
  router.push("/questions");
};
</script>

<style scoped>
/* 基础布局 */
.about-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}

/* 标题样式 */
.page-header {
  text-align: center;
  padding: 40px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #333;
  font-size: 2.2rem;
}

/* 通用区块样式 */
section {
  margin-bottom: 50px;
}

.section-content {
  max-width: 900px;
  margin: 0 auto;
}

section h2 {
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

/* 介绍区域 */
.intro-text {
  color: #666;
  line-height: 1.8;
  font-size: 1.05rem;
}

/* 功能特点区域 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.feature-card {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #eee;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  color: #2ecc71;
  margin: 10px 0;
  font-size: 1.2rem;
}

.feature-card p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
}

.feature-icon {
  font-size: 1.8rem;
  color: #2ecc71;
}

/* 团队区域 */
.team-members {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 30px;
}

.member-card {
  text-align: center;
  padding: 20px;
  max-width: 200px;
}

.member-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.member-role {
  color: #666;
  font-size: 0.9rem;
}

/* 按钮区域 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 50px 0 30px;
}

/* 复用主页按钮样式 */
.start-btn {
  padding: 0.8rem 2.5rem;
  border: 2px solid #2ecc71;
  border-radius: 8px;
  background-color: white;
  color: #2ecc71;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.start-btn:hover {
  background-color: #2ecc71;
  color: white;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .team-members {
    flex-direction: column;
    align-items: center;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .start-btn {
    width: 80%;
  }
}
</style>
